<style type="text/css">
    .type1 {
        background-color: #fff !important;
    }
    
    .type2 {
        background-color: #ccc !important;
    }
</style>
<div ng-controller="MjsCtrl" ng-init="addAction()">
    <ul class="sui-breadcrumb">
        <li><a href="#/mjs/list">{{mjs_data.name?mjs_data.name:'满就送'| translate}}</a></li>
        <li class="active">
            {{!mjs_activity_id?"创建":"edit"|translate}}
        </li>
    </ul>
    <form name="Tradeform" class="sui-form form-horizontal" novalidate>
        <div mywizard class="sui-steps">
            <step>
                <label><span class="round">1</span><span>活动设置</span></label>
                <i class="triangle-right-bg"></i><i class="triangle-right"></i>
            </step>
            <!-- ng-show="mjs_data.ptype == 2" -->
            <step>
                <label><span class="round">2</span><span>设置商品</span></label>
                <i class="triangle-right-bg"></i><i class="triangle-right"></i>
            </step>
            <step ng-show="mjs_data.h_type == 'coupon'">
                <label><span class="round">3</span><span>设置定向优惠范围</span></label>
                <i class="triangle-right-bg"></i><i class="triangle-right"></i>
            </step>
            <step>
                <label><span class="round">{{mjs_data.h_type == 'mjs'?3:4}}</span><span>完成</span></label>
                <i class="triangle-right-bg"></i><i class="triangle-right"></i>
            </step>
            <div stepcontent0 class="stepContent">
                <div class="stepbody">
                    <div class="control-group">
                        <label class="control-label v-top">
                            促销标题：
                        </label>
                        <div class="controls">
                            <input class="input-large" id="title" type="text" name="name" ng-model="mjs_data.name" />
                            <div ng-show="mjs_data.name.length == 0 || mjs_data.name.length > 10" class="sui-msg msg-error msg-clear help-block error">
                                <div class="msg-con">活动标题不能超过10个字</div>
                                <s class="msg-icon"></s>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            起始时间：
                        </label>
                        <div class="controls">
                            <input id="start_time" ng-model="mjs_data.start_time" datetimepicker name="start_time" value="2017-05-21 12:12:15" required>
                            <span class="float_left" style="width:10px;">至</span>
                            <input id="end_time" ng-model="mjs_data.end_time" datetimepicker name="end_time" min-date="{{mjs_data.start_time}}" required>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label v-top">
                            优惠类型：
                        </label>
                        <div class="controls">
                            <ul id="tab-demo2" class="sui-nav nav-tabs nav-primary">
                                <li class="{{mjs_data.type_id == 1?'active':''}}">
                                    <a href="#default" data-toggle="tab" ng-click="tabCut($event);changeType(1);">
                                        满件优惠
                                    </a>
                                </li>
                                <li class="{{mjs_data.type_id == 2?'active':''}}">
                                    <a href="#custom" data-toggle="tab" ng-click="tabCut($event);changeType(2)">
                                        满元优惠
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <input type="hidden" ng-model="mjs_data.type_id" />
                                <div id="default" class="tab-pane {{mjs_data.type_id == 1?'active':''}}">
                                    <div style="height: 40px;">
                                        满
                                        <input id="piece" type="text" name="piece" ng-model="mjs_data.piece" />
                                        <span class="help-inline">件</span>
                                    </div>
                                    <div style="height: 60px;">
                                        打
                                        <input id="piece_discount" type="text" name="piece_discount" ng-model="mjs_data.discount" ng-click="setMode(1)" ng-class="mjs_data.mode==1?'type1':'type2'" />
                                        <span class="help-inline">折</span>
                                        <span class="help-block" style="color:#f00;">举例：填95代表100元商品95元销售；填50代表5折。</span>
                                    </div>
                                    <div>
                                        减
                                        <input id="piece_disprice" type="text" name="piece_disprice" ng-model="mjs_data.disprice" ng-click="setMode(2)" ng-class="mjs_data.mode==2?'type1':'type2'" /> 元
                                    </div>
                                </div>
                                <div id="custom" class="tab-pane {{mjs_data.type_id == 2?'active':''}}">
                                    <div style="height: 40px;">
                                        满
                                        <input id="yuan" type="text" name="yuan" ng-model="mjs_data.yuan" />
                                        <span class="help-inline">元</span>
                                    </div>
                                    <div style="height: 60px;">
                                        打
                                        <input id="yuan_discount" type="text" name="yuan_discount" ng-model="mjs_data.discount" ng-click="setMode(1)" ng-class="mjs_data.mode==1?'type1':'type2'" />
                                        <span class="help-inline">折</span>
                                        <span class="help-block" style="color:#f00;">举例：填95代表100元商品95元销售；填50代表5折。</span>
                                    </div>
                                    <div>
                                        减
                                        <input id="yuan_disprice" type="text" name="yuan_disprice" ng-model="mjs_data.disprice" ng-click="setMode(2)" ng-class="mjs_data.mode==2?'type1':'type2'" /> 元
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            是否包邮：
                        </label>
                        <div class="controls">
                            <chose-province ng-model="mjs_data.city"></chose-province>
                            <div ng-show="mjs_data.city" style="margin-top: 10px;">
                                <!-- <span ng-repeat="city_id in mjs_data.city"> -->
                                <city-name ng-model="mjs_data.city"></city-name>
                                <!-- </span> -->
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            活动范围：
                        </label>
                        <div class="controls">
                            <label data-toggle="radio" class="radio-pretty inline {{mjs_data.ptype == 1?'checked':''}} {{mjs_activity_id && mjs_data.ptype == 2?'disabled':''}}">
                                <input type="radio" name="radio" ng-checked="{{mjs_data.ptype==1}}" ng-disabled="{{mjs_activity_id && mjs_data.ptype==2}}"
                                    ng-model="mjs_data.ptype" value="1"><span>全店商品参加</span>
                            </label>
                            <label data-toggle="radio" class="radio-pretty inline {{mjs_data.ptype == 2?'checked':''}} {{mjs_activity_id&&mjs_data.ptype == 1?'disabled':''}}">
                                <input type="radio" name="radio" ng-model="mjs_data.ptype" ng-checked="{{mjs_data.ptype==2}}"
                                    ng-disabled="{{mjs_activity_id&&mjs_data.ptype==1}}" value="2"><span>部分商品参加</span>
                            </label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            定向优惠：
                        </label>
                        <div class="controls">
                            <label data-toggle="radio1" class="radio-pretty inline {{mjs_data.h_type == 'coupon'?'checked':''}}">
                                <input type="radio" name="radio1" ng-checked="{{mjs_data.h_type=='coupon'}}" ng-model="mjs_data.h_type"
                                    value="coupon"><span>是</span>
                            </label>
                            <label data-toggle="radio1" class="radio-pretty inline {{mjs_data.h_type == 'mjs'?'checked':''}}">
                                <input type="radio" name="radio1" ng-model="mjs_data.h_type" ng-checked="{{mjs_data.h_type=='mjs'}}"
                                    value="mjs"><span>否</span>
                            </label>
                        </div>
                    </div>
                    <div class="control-group {{mjs_data.h_type == 'mjs'?'zhide':''}}">
                        <label class="control-label v-top">
                            优惠券总张数：
                        </label>
                        <div class="controls">
                            <input id="coupon_count" type="text" name="coupon_count" ng-model="mjs_data.coupon_count" /> 张
                            <div class="sui-msg msg-tips">
                                <div class="msg-con">优惠券数量为0，则表示不限制</div>
                                <s class="msg-icon"></s>
                            </div>
                        </div>
                    </div>
                    <div class="control-group {{mjs_data.h_type == 'mjs'?'zhide':''}}">
                        <label class="control-label v-top">
                            每人领取的张数：
                        </label>
                        <div class="controls">
                            <input id="person_limit_count" type="text" name="person_limit_count" ng-model="mjs_data.person_limit_count" /> 张
                            <div class="sui-msg msg-tips">
                                <div class="msg-con">领取张数为0，则表示不限制</div>
                                <s class="msg-icon"></s>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <button class="sui-btn btn-primary" ng-click="mjsAdd();" ng-show="mjs_data.ptype == 1 && mjs_data.h_type == 'mjs'" ng-disabled="!mjs_data.name">{{!mjs_activity_id?"save":"edit"|translate}}</button>
                    <!-- <button class="sui-btn btn-primary" mywizard-next ng-click="mjsAdd();" ng-show="mjs_data.h_type == 'coupon' && mjs_data.ptype == 1"> 下一步：设置定向优惠对象 </button> -->
                    <!-- <button ng-show="mjs_data.ptype == 1" type="button" class="sui-btn btn-primary" mywizard-next ng-click="mjsAdd();">{{'下一步：设置商品'|translate}}</button> -->
                    <!-- ng-show="mjs_data.ptype == 2" -->
                    <button ng-show="mjs_data.h_type=='coupon'||mjs_data.ptype == 2" type="button" id="next1" class="sui-btn btn-primary" mywizard-next ng-disabled="!mjs_data.name" ng-click="mjsAdd('part');">{{'下一步：设置商品'|translate}}</button>
                </div>
            </div>
            <div stepcontent1 class="stepContent">
                <div class="stepbody">
                    <div class="sui-msg msg-block msg-info">
                        <div class="msg-con">
                            注意：如果活动范围设置全店商品参加的话，不需要设置商品！
                            <span ng-show="mjs_data.ptype == 1" style="color: #f00;">当前活动范围设置的是 全店商品参加！</span>
                        </div>
                        <s class="msg-icon"></s>
                    </div>
                    <ul id="tab-demo" class="sui-nav nav-tabs nav-primary">
                        <li class="{{total_count?'active':''}}"><a href="#default1" data-toggle="tab" ng-click="tabCut($event);">已参加({{total_count?total_count:chosedItems.length?chosedItems.length:0}})</a></li>
                        <li class="{{!total_count?'active':''}}">
                            <a href="#custom1" data-toggle="tab" ng-click="tabCut($event);choseBroadcast();">添加</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="default1" class="tab-pane {{total_count?'active':''}}">
                            <div class="sui-form sui-form">
                                <form class="sui-form" style="margin:0px;">
                                    <input type="text" placeholder="{{'keyword'|translate}}" ng-model="keyword">
                                    <button class="sui-btn btn-primary" ng-click="mjsItemGet()"> {{'search' | translate}}</button>
                                </form>
                            </div>
                            <table class="sui-table table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{"item_image"|translate}} </th>
                                        <th>{{"title"|translate}} </th>
                                        <th>{{"operation"|translate}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="item in item_list">
                                        <td><img ng-src="{{item.img}}" class="item-image-80" /></td>
                                        <td>
                                            {{item.title}}
                                            <br> {{item.item_id}}
                                        </td>
                                        <td>
                                            <button class="sui-btn btn-danger" ng-click="mjsItemDelete(item.id,item.mjs_activity_id)">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <pager page-no="1" page-size="pageSize" total="total_count" get-data="mjsItemGet(pageNo)"></pager>
                        </div>
                        <div id="custom1" class="tab-pane {{!total_count?'active':''}}">
                            <choose-item item-check="itemdata(items)" is-chose-item="1" mult="yes" chosed-item="mjs_item_list" skushow="1"></choose-item>
                        </div>
                    </div>
                    <div class="sui-msg msg-block msg-warning {{mjs_data.ptype==1?'':'zhide'}}">
                        <div class="msg-con">注意：现在活动范围是全店商品，无需单独增加商品！</div>
                        <s class="msg-icon"></s>
                    </div>
                </div>
                <div>
                    <button type="button" class="sui-btn btn-primary" mywizard-previous>上一步</button>
                    <button type="button" ng-show="mjs_data.h_type == 'mjs'" class="sui-btn btn-primary" ng-click="chooseItemAdd(mjs_activity_id);">保存</button>
                    <button type="button" ng-show="mjs_data.h_type == 'coupon'" class="sui-btn btn-primary" mywizard-next ng-click="chooseItemAdd(mjs_activity_id);">{{'下一步：设置定向优惠范围'|translate}}</button>
                </div>
            </div>
            <div stepcontent2 class="stepContent">
                <div class="stepbody">
                    <!-- <wx-app-list ng-model="wxappid" dft="1" ary="storeary" storedata="1"> </wx-app-list> -->
                    <chose-member mult="yes" title="选择会员" chosed-items="chosed_range" member-check="memberdata(memberInfo)" app="1"></chose-member>
                    <table class="sui-table table-bordered" style="margin-top:15px;width:800px;">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{'编号'|translate}}</th>
                                <th width="35%">{{'昵称'|translate}}</th>
                                <th width="35%">{{'可用次数'|translate}}</th>
                                <th width="30%">{{'操作'|translate}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="(k ,list) in range_list">
                                <td></td>
                                <td>{{list.member_id}}</td>
                                <td>
                                    <wxinfo ng-model="list.member_id" stye="1"></wxinfo>
                                </td>
                                <td>
                                    总可用次数 <input type="number" class="input-mini" ng-model="list.has_num">
                                    <button class="sui-btn btn-primary" ng-click="saveHasNum(list.member_id,list.has_num)">
                                        赠送 </button>
                                    <br>
                                    <div class="sui-msg msg-success msg-clear help-block error">
                                        <div class="msg-con">已用{{list.used_num}}次数，剩余{{list.has_num - list.used_num}}张优惠券
                                        </div>
                                        <s class="msg-icon"></s>
                                    </div>
                                </td>
                                <td>
                                    <button class="sui-btn btn-danger" ng-click="rangeDel(list.range_id,list.mjs_activity_id)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <pager page-no="1" page-size="pageSize" total="range_count" get-data="mjsRangeGet(pageNo)"></pager>
                </div>
                <div>
                    <button type="button" class="sui-btn btn-primary" mywizard-previous>上一步</button>
                    <button type="button" class="sui-btn btn-primary" ng-click="returnIndex();">返回首页</button>
                </div>
            </div>
        </div>
    </form>
</div>